<template>
  <div class="card col-12">
    <div class="card-body">
      <form class="form-horizontal">
        <div class="row mb-2">
          <label class="control-label col-3 ms-auto text-end">总查询次数</label>
          <div class="col-4 me-auto">
            <input
              type="input"
              class="form-control"
              v-model.number="maxTotal"
            />
          </div>
        </div>
        <div class="row mb-2">
          <label class="control-label col-3 ms-auto text-end">月查询次数</label>
          <div class="col-4 me-auto">
            <input
              type="input"
              class="form-control"
              v-model.number="maxMonthly"
            />
          </div>
        </div>
        <div class="row mb-2">
          <label class="control-label col-3 ms-auto text-end">已用总数</label>
          <div class="col-4 me-auto">
            <input
              type="input"
              class="form-control"
              v-model.number="usedTotal"
              readonly
            />
          </div>
        </div>
        <div class="row mb-2">
          <label class="control-label col-3 ms-auto text-end">本月已用数</label>
          <div class="col-4 me-auto">
            <input
              type="input"
              class="form-control"
              v-model.number="usedMonthly"
              readonly
            />
          </div>
        </div>

        <div class="row mb-2">
          <button
            id="btnChange"
            type="button"
            class="btn btn-primary  col-4 offset-4"
            @click.stop="saveCustomerAvCount()"
          >
            保存
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import {
  searchCustomerAvCountInfo,
  saveCustomerAvCountInfo,
} from "@/api/customer.js";
import MyModalPrompt from "@/components/modal/my-modal-prompt.vue";

export default {
  props: {
    customerId: {
      type: Number,
    },
  },
  components: {
    MyModalPrompt,
  },
  data() {
    return {
      modalTitle: "",
      saving: false,

      maxTotal: 0,
      maxMonthly: 0,
      usedTotal: 0,
      usedMonthly: 0,
    };
  },
  computed: {
    isAdmin() {
      return this.$store.getters.isAdmin;
    },
  },
  mounted: function () {
    this.searchAvCountInfo();
  },
  methods: {
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    showLoading: function (msg) {
      this.$store.dispatch("showLoading", { loadingText: msg });
    },
    hideLoading: function () {
      this.$store.dispatch("hideLoading");
    },
    searchAvCountInfo: function () {
      searchCustomerAvCountInfo(this.customerId, (v) => {
        // console.log(v)
        this.maxTotal = v.totalMax;
        this.maxMonthly = v.monthlyMax;
        this.usedTotal = v.totalUsed;
        this.usedMonthly = v.monthlyUsed;
      });
    },
    saveCustomerAvCount: function () {
      const params = {
        maxTotal: this.maxTotal,
        maxMonthly: this.maxMonthly,
      };
      saveCustomerAvCountInfo(this.customerId, params, (v) => {
        if (v.status === "OK") {
          this.showErrMsg("保存成功");
        } else {
          this.showErrMsg("保存失败：" + v.errmsg, "danger");
        }
      });
    },
  },
};
</script>